<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="/css/total/signup.css">
  <title>代付订单详情</title>
  <% include ../component/common_meta.html %>
</head>

<body>
  <div id="app" style="height:100%">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div v-cloak class="cloak">
      <div v-if="state == 0">
        <div class="pay" v-show="signUpInfo.token && signUpInfo.token != ''">
          <div class="top">
            <img :src="examDetail.titleImg" alt="">
            <p class="yd">{{examDetail.title}}</p>
            <p class="price">价格：
              <span>¥{{examDetail.original_price}}</span>
            </p>
          </div>
          <p class="info">{{examDetail.exam_detail}}</p>
          <div class="noBook" v-if="examDetail.type != 2">
            <div class="number">
              <span>购买数量：&nbsp;{{signUpInfo.exam_count}}</span>
            </div>
            <div class="line">个人信息</div>
            <div class="type">
              <p style="border-bottom: 0.02rem solid #EBEBEB;">姓名：{{examDetail.realname}}</p>
              <p>Q Q：{{signUpInfo.qq}}</p>
            </div>
          </div>
          <div class="book" v-if="examDetail.type == 2">
            <div class="number">
              <span>购买数量：&nbsp;{{signUpInfo.exam_count}}</span>
            </div>
            <div class="line">试卷类型</div>
            <div class="type">
              <p style="border-bottom: 0.02rem solid #EBEBEB;">版本：{{signUpInfo.option.name}}</p>
              <p>学科：{{signUpInfo.option.subject}}</p>
            </div>
            <div class="anotherPayAddress">
              <div class="line">收货地址</div>
              <p>{{examDetail.realname}}&nbsp;{{signUpInfo.phone}}</p>
              <span>{{signUpInfo.address}}</span>
            </div>
          </div>
          <% include ../signup/footer_pay_type.html %>
            <div class="line">支付信息</div>
            <div class="payInfo">
              <p>
                <span class="payInfoLeft">商品价格</span>
                <span class="payInfoRight">￥{{examDetail.sign_up_price}}</span>
              </p>
              <p>
                <span class="payInfoLeft">运费</span>
                <span class="payInfoRight">+￥0</span>
              </p>
              <p>
                <span class="payInfoLeft">优惠</span>
                <span class="payInfoRight">-￥{{payMode.yhmoney}}</span>
              </p>
              <p class="payInfoLine"></p>
              <p class="payInfoRight">需支付：
                <span>￥{{examDetail.original_price}}</span>
              </p>
            </div>
            <footer>
              <button class="anotherPay" @click="handleSubmit">立即支付</button>
            </footer>
            <div class="mode" v-if="mode">
              <div class="paySuccess" v-if="paySuccess">
                <img src="/img/ygsuccess02.jpg" alt="">
                <p>支付成功</p>
                <span>￥{{examDetail.original_price}}</span>
              </div>
              <div class="payFail" v-if="payFail">
                <img src="/img/fails.png" alt="">
                <p>微信支付失败，请重试</p>
                <button style="border-right: 0.02rem solid #EEE;" @click="handleFail">取消</button>
                <button @click="handleSubmit">重试</button>
              </div>
            </div>
        </div>
      </div>
      <div style="font-size:0.5rem;" v-if="state != 0">
        页面已失效
      </div>
    </div>

  </div>
  <% include ../component/common_js.html %>
    <script src="/js/pay/pay.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          smsText: '发送',
          state: '',   // 支付狀態
          my_invitation_code: '',
          examDetail: {
            sign_up_price: '',
            title: '',
            original_price: '',
            titleImg: '',
            exam_detail: '',
            type: '',
          },
          payMode: {
            pay: '购买优惠：',
            yhmoney: '0',
          },
          signUpInfo: {
            realname: '',
            phone: '',
            qq: '',
            city: '',
            pay_type: 1,
            exam_id: 2,
            invitation_code: '',
            return_url: '',
            origin: '',
            email: '',
            code: '',
            token: '',
            from: 'wap',
            options: {
              name: '',
              subject: ''
            },
            address: '1',
            exam_count: 1,
            sale_id: '1',
            group_purchase_id: '', //团购id
            pay_for_another_id: '',
            user_id: '' // 代付id
          },
          submiting: false,
          paySuccess: false,
          payFail: true,
          mode: false //支付成功或失败的弹框
        },
        mounted: function () {
          if (localStorage.getItem('token') && localStorage.getItem('token') != '') {
            this.signUpInfo.token = localStorage.getItem('token');
            this.handleAnotherInfo();
          }
        <% if (exam_id) {%>
            this.signUpInfo.exam_id = "<%= exam_id %>";
        <%}%>
        <% if (code) {%>
            this.signUpInfo.code = "<%= code %>";
        <%}%>
        <% if (origin) {%>
            this.signUpInfo.origin = "<%= origin %>";
        <%}%> 
        <% if (sale_id) {%>
            this.signUpInfo.sale_id = "<%= sale_id %>";
        <%}%>
        // 获取从首页传来的邀请码，首页传来的邀请码一般是别人分享的邀请码
        <% if (invitation_code) {%>
            this.signUpInfo.invitation_code = "<%= invitation_code %>";
            this.invitation_money = '179.00';
        <%}%>
        // 在首页的controllers里判断页面在哪里打开，pt为wechat/wap/qq
        <% if (pt) {%>
            this.signUpInfo.from = "<%= pt %>";
        <%}%>
        <% if (pay_for_another_id) {%>
            this.signUpInfo.pay_for_another_id = "<%= pay_for_another_id %>";
        <%}%>
        if (this.signUpInfo.from == 'wechat') {
            this.signUpInfo.pay_type = 1;
          }
          if (this.signUpInfo.from == 'wap') {
            this.signUpInfo.pay_type = 2;
          }
          if (this.signUpInfo.from == 'qq') {
            this.signUpInfo.pay_type = 3;
          }
          this.signUpInfo.return_url = 'https://m.tl100.com/tlmall/another_pay?exam_id=' + this.signUpInfo.exam_id;
            <%if (out_trade_no) {%>
          var params = {};
            params.order_id = <%= out_trade_no %>;
            params.user_id = this.signUpInfo.user_id;
            api.post('/api/v2/exam/getAnotherOrder', params)
              .then(function (response) {
                var rs_data = response.data.data;
                if (rs_data.state == 1) {
                  vm.paySuccess = true;
                  vm.mode = true;
                  setTimeout(function () {
                    vm.paySuccess = false;
                    vm.mode = false;
                  }, 1000)
                  location.replace("/tlmall/order_list?exam_id=<%= exam_id %>");
                } else {
                  vm.payFail = true;
                  vm.mode = true;
                  // alert('支付失败,请刷新页面重试！');
                  setLog('/api/v2/exam/getAnotherOrder:fail', JSON.stringify(rs_data));
                }
              })
              .catch(function (error) {
                console.log("fail");
                console.log(error);
              });
        <%}%>
      },
        methods: {
          handleAnotherInfo() {
            // 获取页面所有信息
            var vm = this;
            api.post('/api/v2/exam/getPayForAnotherInfo', {
              pay_for_another_id: "<%= pay_for_another_id %>"
            }).then(res => {
              if (res.data.res_code == 1) {
                var res_data = res.data.data;
                vm.examDetail.title = res_data.exam_name;
                vm.examDetail.realname = res_data.realname;
                // vm.examDetail.exam_detail = res_data.order_desc.name;
                vm.examDetail.original_price = res_data.order_price;
                vm.examDetail.type = res_data.type;
                vm.signUpInfo.exam_count = res_data.exam_count;
                vm.signUpInfo.phone = res_data.phone;
                vm.signUpInfo.qq = res_data.qq;
                vm.signUpInfo.user_id = res_data.user_id;
                vm.payMode.yhmoney = res_data.save_money;
                vm.my_invitation_code = res_data.invitation_code;
                vm.examDetail.titleImg = res_data.img_url == '' ? '/img/tl.jpg' : res_data.img_url ;
                vm.state = res_data.state;
                vm.signUpInfo.options.name = res_data.exam_option.name;
                vm.signUpInfo.options.subject = res_data.exam_option.subject;
                vm.examDetail.sign_up_price = res_data.order_price + res_data.save_money;
                vm.signUpInfo.address = res_data.default_receiving_info ? res_data.default_receiving_info.address : '';
              }
            }).catch(err => {
              setLog('/api/v2/exam/getPayForAnotherInfo:catch', JSON.stringify(err));
            })
          },
          handleSubmit() {
            if (this.submiting) {
              return;
            }
            <%if (pt == 'wechat') {%>
              // const APP_ID = 'wx9914d1b785f24423';
              var BASE = "snsapi_base";
              var USER_INFO = "snsapi_userinfo";
              var APPID = 'wx8e00a187a937157e';
              function getWxLoginUrl (app_id, redirect_uri, scope, state) {
                let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
                  'appid=' + app_id +
                  '&redirect_uri=' + encodeURIComponent(redirect_uri) +
                  '&response_type=code&scope=' + scope +
                  '&state=' + state +
                  '#wechat_redirect';
                return url;
              }
              //如果不存在code，则跳转微信登陆    
              <%if (code == 'test') {%>
                window.location.replace(getWxLoginUrl(APPID, '<%=url %>', BASE, 'otherpay'));
                return;
              <%}%>
            <%}%>
            // 根据支付类型判断查询接口。 .........
            var getOrder = '/api/v2/exam/getAnotherOrder';
            var that = this;
            this.submiting = true;
            // 传入支付接口和查询订单接口
            submit(this, '/api/v2/exam/payForAnother', getOrder);
          },
          handleFail() {
            // 取消支付
            this.mode = false;
            this.payFail = false
          }
        }

      })

    </script>
</body>

</html>